<template>
	<div class="bg-white px-3" style="margin: -20px;margin-top: -1rem;margin-bottom: 0!important;">
		<el-tabs v-model="preUrl" @tab-click="getList">
			<el-tab-pane label="管理员列表" name="manager">
				<div class="d-flex align-items-center">
					<el-button type="primary" size="mini" @click="openDialog('manager')">添加管理员</el-button>
					<div class="ml-auto d-flex">
						<el-input size="mini" placeholder="请输入用户名" v-model="keyword" style="width:200px;"></el-input>
						<el-button type="info" size="mini" class="ml-2" @click="getList">搜索</el-button>
					</div>
				</div>
				<el-table border class="mt-3" :data="managerList" style="width: 100%">
					<el-table-column align="center" label="用户头像">
						<template slot-scope="scope">
							<el-avatar size="large" :src="scope.row.avatar"></el-avatar>
						</template>
					</el-table-column>
					<el-table-column align="center" label="用户名" prop="username">
					</el-table-column>
					<el-table-column align="center" label="所属管理员">
						<template slot-scope="scope">
							{{ scope.row.role.name }}
						</template>
					</el-table-column>
					<el-table-column prop="status" align="center" label="状态">
						<template slot-scope="scope">
							<el-button :type="scope.row.status === 1 ? 'success' : 'danger'" size="mini"
								@click="changeStatus(scope.row)" plain>{{ scope.row.status === 1 ? '启用' : '禁用' }}
							</el-button>
						</template>
					</el-table-column>
					<el-table-column align="center" label="操作" width="150">
						<template slot-scope="scope">
							<el-button type="text" size="mini" @click="openDialog('manager', scope.row)">修改</el-button>
							<el-button type="text" size="mini" @click="deleteItem(scope.row)">删除</el-button>
						</template>
					</el-table-column>
				</el-table>
			</el-tab-pane>
			<el-tab-pane label="角色列表" name="role">
				<div class="d-flex align-items-center">
					<el-button type="primary" size="mini" v-auth="'添加角色'" @click="openDialog('role')">添加角色</el-button>
				</div>
				<el-table border class="mt-3" :data="roleList" style="width: 100%">
					<el-table-column align="center" label="角色名称" prop="name">
					</el-table-column>
					<el-table-column align="center" label="角色描述" prop="description">
					</el-table-column>
					<el-table-column prop="status" align="center" label="状态">
						<template slot-scope="scope">
							<el-button :type="scope.row.status ? 'success' : 'danger'" size="mini"
								@click="changeStatus(scope.row)" plain>{{ scope.row.status ? '启用' : '禁用' }}
							</el-button>
						</template>
					</el-table-column>
					<el-table-column align="center" label="操作" width="250">
						<template slot-scope="scope">
							<el-button type="text" size="mini" @click="openDialog('role', scope.row)">修改</el-button>
							<el-button type="text" size="mini" @click="openDrawer(scope.row)">配置权限</el-button>
							<el-button type="text" size="mini" @click="deleteItem(scope.row)">删除</el-button>
						</template>
					</el-table-column>
				</el-table>
			</el-tab-pane>
			<el-tab-pane label="权限列表" name="rule">

				<div class="d-flex align-items-center">
					<el-button type="primary" size="mini" v-auth="'添加规则'" @click="openDialog('rule')">添加规则</el-button>
				</div>

				<el-tree :data="ruleList" :props="defaultProps" @node-click="handleNodeClick" default-expand-all
					:expand-on-click-node="false">

					<span class="custom-tree-node" slot-scope="{ node, data }">
						<div>
							<span v-if="data.menu" :class="data.icon ? data.icon : 'el-icon-star-off'"
								class="mr-2 text-muted"></span>
							<small v-else class="mr-2 text-muted">{{ data.method }}</small>
							<span>{{ data.name }}</span>
							<span v-if="data.menu" class="badge ml-2">{{ data.frontpath }}</span>
							<span v-else class="badge badge-secondary ml-2">{{ data.condition }}</span>
						</div>
						<span>
							<el-button :type="data.status ? 'success' : 'danger'" size="mini"
								@click="changeStatus(data)" plain>{{
									data.status ? '启用' : '禁用' }}
							</el-button>
							<el-button type="text" size="mini" @click="openDialog('rule', data.id)"
								v-auth="'添加规则'">增加</el-button>
							<el-button type="text" size="mini" @click="openDialog('rule', data)">修改</el-button>
							<el-button type="text" size="mini" @click="deleteItem(data)">删除</el-button>
						</span>
					</span>

				</el-tree>
			</el-tab-pane>
		</el-tabs>



		<div style="height: 60px;"></div>
		<el-footer v-if="preUrl != 'rule'" class="border-top d-flex align-items-center px-0 position-fixed bg-white"
			style="bottom: 0;left: 200px;right: 0;z-index: 100;">
			<div style="flex: 1;" class="px-2">
				<el-pagination :current-page="page.current" :page-sizes="page.sizes" :page-size="page.size"
					layout="total, sizes, prev, pager, next, jumper" :total="page.total" @size-change="handleSizeChange"
					@current-change="handleCurrentChange">
				</el-pagination>
			</div>
		</el-footer>



		<el-dialog title="提示" :visible.sync="dialogVisible" width="70%" :before-close="handleClose">

			<!-- 添加/修改管理员 -->
			<el-form v-if="preUrl === 'manager'" ref="form" :model="form.manager" label-width="80px">
				<el-form-item label="用户名" prop="username">
					<el-input v-model="form.manager.username" placeholder="用户名" size="mini"
						style="width: 25%;"></el-input>
				</el-form-item>
				<el-form-item label="密码" prop="password">
					<el-input v-model="form.manager.password" placeholder="密码" size="mini"
						style="width: 25%;"></el-input>
				</el-form-item>
				<el-form-item label="头像">
					<div>
						<span v-if="!form.manager.avatar" class="btn btn-light border mr-2" @click="chooseImage">
							<i class="el-icon-plus"></i>
						</span>
						<img v-else :src="form.manager.avatar" class="rounded"
							style="width: 45px;height: 45px;cursor: pointer;" @click="chooseImage" />
					</div>
				</el-form-item>
				<el-form-item label="所属角色">
					<el-select v-model="form.manager.roleId" placeholder="请选择所属角色" size="mini">
						<el-option v-for="(item, index) in roleOptions" :key="index" :label="item.name"
							:value="item.id"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="状态">
					<el-radio-group v-model="form.manager.status" size="mini">
						<el-radio :label="1" border>启用</el-radio>
						<el-radio :label="0" border>禁用</el-radio>
					</el-radio-group>
				</el-form-item>
			</el-form>
			<!-- 添加/修改角色 -->
			<el-form v-if="preUrl === 'role'" ref="form" :model="form.role" label-width="80px">
				<el-form-item label="角色名称" prop="name">
					<el-input v-model="form.role.name" placeholder="角色名称" size="mini" style="width: 25%;"></el-input>
				</el-form-item>
				<el-form-item label="角色描述" prop="description">
					<el-input type="textarea" v-model="form.role.description" placeholder="角色描述" size="mini"></el-input>
				</el-form-item>
				<el-form-item label="状态">
					<el-radio-group v-model="form.role.status" size="mini">
						<el-radio :label="1" border>启用</el-radio>
						<el-radio :label="0" border>禁用</el-radio>
					</el-radio-group>
				</el-form-item>
			</el-form>
			<!-- 添加/修改规则 -->
			<el-form v-if="preUrl === 'rule'" ref="form" :model="form.rule" label-width="100px">
				<el-form-item label="上级规则">
					<el-select v-model="form.rule.ruleId" placeholder="请选择上级规则" size="mini">
						<el-option label="顶级规则" :value="0"></el-option>
						<el-option v-for="(item, index) in ruleOptions" :key="index" :label="item | tree"
							:value="item.id"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="菜单/规则">
					<el-radio-group v-model="form.rule.menu" size="mini">
						<el-radio :label="1" border>菜单</el-radio>
						<el-radio :label="0" border>规则</el-radio>
					</el-radio-group>
				</el-form-item>

				<el-form-item label="名称">
					<el-input v-model="form.rule.name" placeholder="名称" size="mini" style="width: 25%;"></el-input>
				</el-form-item>
				<el-form-item label="排序" prop="level">
					<el-input type="number" v-model="form.rule.ordered" placeholder="排序" size="mini" style="width: 25%;"></el-input>
				</el-form-item>
				<el-form-item label="图标" v-if="form.rule.menu">
					<el-input v-model="form.rule.icon" placeholder="图标" size="mini"></el-input>
				</el-form-item>
				<el-form-item label="前端路由路径" v-if="form.rule.menu && form.rule.ruleId > 0">
					<el-input v-model="form.rule.frontpath" placeholder="前端路由路径" size="mini"></el-input>
				</el-form-item>
				<el-form-item label="前台路由别名" v-if="form.rule.menu">
					<el-input v-model="form.rule.description" placeholder="前台路由别名" size="mini"></el-input>
				</el-form-item>


				<el-form-item label="后端规则" v-if="!form.rule.menu">
					<el-input v-model="form.rule.condition" placeholder="后端规则" size="mini"></el-input>
				</el-form-item>
				<el-form-item label="请求方式" v-if="!form.rule.menu">
					<el-select v-model="form.rule.method" placeholder="请选择请求方式" size="mini">
						<el-option label="GET" value="GET"></el-option>
						<el-option label="POST" value="POST"></el-option>
						<el-option label="PUT" value="PUT"></el-option>
						<el-option label="DELETE" value="DELETE"></el-option>
					</el-select>
				</el-form-item>

				<el-form-item label="状态">
					<el-radio-group v-model="form.rule.status" size="mini">
						<el-radio :label="1" border>启用</el-radio>
						<el-radio :label="0" border>禁用</el-radio>
					</el-radio-group>
				</el-form-item>
			</el-form>

			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="submit">确 定</el-button>
			</span>
		</el-dialog>
		<!-- 配置权限 -->
		<el-drawer title="配置权限" :visible.sync="drawer" direction="rtl" :before-close="handleClose" size="40%">
			<div style="position: absolute;top:52px;left: 0;right: 0;bottom: 0;">
				<div style="position: absolute;top: 0;left: 0;right: 0;bottom: 60px;overflow-y: auto;">
					<el-tree :data="ruleList" show-checkbox node-key="id" default-expand-all
						:default-checked-keys="checkedKeys" :props="defaultProps" :check-strictly="true" @check="check">
					</el-tree>
				</div>
				<div style="height: 60px;position: absolute;bottom: 0;right: 0;left: 0;"
					class="border d-flex align-items-center px-3 bg-white">
					<el-button @click="drawer = false">取消</el-button>
					<el-button type="primary" @click="submitRules">确定</el-button>
				</div>
			</div>
		</el-drawer>

	</div>
</template>

<script>
import common from '@/common/mixins/common.js';
export default {
	mixins: [common],
	inject: ['app', 'layout'],
	data() {
		return {
			keyword: "",
			preUrl: "manager",
			managerList: [],

			roleList: [],

			ruleList: [],
			defaultProps: {
				children: 'child',
				label: 'name'
			},

			dialogVisible: false,
			dialogType: "manager",
			roleOptions: [],
			ruleOptions: [],
			dialogId: 0,
			form: {
				manager: {
					id: null,
					username: "",
					password: "",
					avatar: "",
					roleId: "",
					status: 1
				},
				role: {
					id: null,
					name: "",
					description: "",
					status: 1
				},
				rule: {
					id: null,
					menu: 0,
					ruleId: "",
					name: "",
					status: 1,
					frontpath: "",
					description: "",
					condition: "",
					icon: "",
					method: "GET",
					ordered: 50
				}
			},

			drawer: false,
			drawerId: 0,
			checkedKeys: []
		}
	},
	filters: {
		tree(item) {
			if (item.level == 0) {
				return item.name
			}
			let str = ''
			for (let i = 0; i < item.level; i++) {
				str += i == 0 ? '|--' : '--'
			}
			return str + ' ' + item.name;
		}
	},
	methods: {
		// 打开弹出层
		openDialog(type, item = false) {
			// 确认类型
			this.dialogType = type
			// 初始化表单
			switch (type) {
				case 'manager':
					if (!item) {
						this.form.manager = {
							username: "",
							password: "",
							avatar: "",
							roleId: "",
							status: 1
						}
						this.dialogId = 0
					} else {
						this.form.manager = {
							username: item.username,
							password: item.password,
							avatar: item.avatar,
							roleId: item.roleId,
							status: item.status,
						}
						this.dialogId = item.id
					}
					break;
				case 'role':
					if (!item) {
						this.form.role = {
							name: "",
							description: "",
							status: 1
						}
						this.dialogId = 0
					} else {
						this.form.role = {
							name: item.name,
							description: item.description,
							status: item.status,
						}
						this.dialogId = item.id
					}
					break;
				case 'rule':
					if (!item || typeof item === 'number') {
						this.form.rule = {
							menu: 0,
							ruleId: "",
							name: "",
							status: 1,
							frontpath: "",
							description: "",
							condition: "",
							icon: "",
							method: "GET",
							ordered: 50
						}
						this.form.rule.ruleId = item
						this.dialogId = 0
					} else {
						this.form.rule = {
							menu: item.menu,
							ruleId: item.ruleId,
							name: item.name,
							status: item.status,
							frontpath: item.frontpath,
							description: item.description,
							condition: item.condition,
							icon: item.icon,
							method: item.method,
							ordered: 50
						}
						this.dialogId = item.id
					}
					break;
			}
			// 显示弹出层
			this.dialogVisible = true
		},
		handleClose(done) {
			this.$confirm('确认关闭？')
				.then(_ => {
					done();
				})
				.catch(_ => { });
		},
		// 获取请求列表分页url
		getListUrl() {
			if (this.preUrl === 'manager') {
				return `/admin/${this.preUrl}/${this.page.current}?limit=${this.page.size}&keyword=${this.keyword}`
			}
			return `/admin/${this.preUrl}/${this.page.current}?limit=${this.page.size}`
		},
		getListResult(e) {
			console.log(e);
			switch (this.preUrl) {
				case 'manager':
					this.managerList = e.list
					this.roleOptions = e.role
					break;
				case 'role':
					this.roleList = e.list
					break;
				case 'rule':
					this.ruleList = e.list
					this.ruleOptions = e.rules
					break;
			}
		},
		// 提交
		submit() {
			this.addOrEdit(this.form[this.preUrl], this.dialogId);
			this.dialogVisible = false
		},

		handleNodeClick(data) {
			console.log(data);
		},
		// 选择头像
		chooseImage() {
			this.app.chooseImage((res) => {
				this.form.manager.avatar = res[0].url
			}, 1)
		},
		// 打开抽屉
		openDrawer(item) {
			console.log(item);
			this.layout.showLoading()
			this.axios.get('/admin/rule/1', {
				token: true
			}).then(res => {
				this.drawer = true
				this.ruleList = res.data.data.list
				this.checkedKeys = item.rules.map(item => item.id)
				this.drawerId = item.id
				this.layout.hideLoading()
			}).catch(err => {
				this.layout.hideLoading()
			})
		},
		check(...e) {
			this.checkedKeys = e[1].checkedKeys
		},
		submitRules() {
			this.axios.post('/admin/role/set_rules', {
				id: this.drawerId,
				rule_ids: this.checkedKeys
			}, {
				token: true
			}).then(res => {
				this.drawer = false
				this.getList()
				this.$message({
					type: "success",
					message: "配置成功"
				})
			})
		}
	},
}
</script>

<style></style>
